<template>
  <div class="inbound-management">
    <!-- 搜索筛选区域 -->
    <el-card shadow="never" class="search-card">
      <el-form :model="searchForm" label-width="90px">
        <el-row :gutter="20">
          <!-- 入库状态改为标签式单选 -->
          <el-col :span="24">
            <el-form-item label="入库状态" class="filter-group">
              <el-radio-group v-model="searchForm.status">
                <el-radio 
                  v-for="item in inboundStatusOptions" 
                  :key="item.value" 
                  :label="item.value"
                  class="status-tag"
                  :class="`status-${item.value}`"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <!-- 入库类型改为标签式单选 -->
          <el-col :span="24">
            <el-form-item label="入库类型" class="filter-group">
              <el-radio-group v-model="searchForm.type">
                <el-radio
                  v-for="item in inboundTypeOptions"
                  :key="item.value"
                  :label="item.value"
                  class="type-tag"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <!-- 保留其他搜索条件 -->
          <el-col :span="6">
            <el-form-item label="入库单号">
              <el-input v-model="searchForm.code" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务单号">
              <el-input v-model="searchForm.bizCode" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        
        <div class="search-buttons">
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            <span>搜索</span>
          </el-button>
          <el-button @click="handleReset">
            <el-icon><Refresh /></el-icon>
            <span>重置</span>
          </el-button>
        </div>
      </el-form>
    </el-card>

    <!-- 操作按钮区域 -->
    <div class="operation-buttons">
      <el-button type="primary" icon="Plus" @click="handleadd">+ 新增</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="code" label="单号/业务单号" width="180">
        <template #default="{ row }">
          <div>{{ row.code }}</div>
          <div v-if="row.bizCode" class="biz-code">业务单号：{{ row.bizCode }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="warehouse" label="仓库" width="120" />
      <el-table-column label="总数量/总金额（元）" width="180">
        <template #default="{ row }">
          <div>数量：{{ row.quantity }}</div>
          <div>金额：{{ row.amount }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="入库状态" width="120">
        <template #default="{ row }">
          <el-tag :type="row.status === '已入库' ? 'success' : 'warning'">
            {{ row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="入库类型" width="120" />
      <el-table-column prop="supplier" label="供应商" />
      <el-table-column label="操作时间" width="180">
        <template #default="{ row }">
          <div>创建：{{ row.createTime }}</div>
          <div>更新：{{ row.updateTime }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="operator" label="操作人" width="120" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column label="操作" width="220">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleEdit(row)">修改</el-button>
          <el-button link type="primary" @click="handleView(row)">查看</el-button>
          <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
          <el-button link type="primary" @click="handlePrint(row)">打印</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="pagination.current"
        :page-size="pagination.size"
        :total="pagination.total"
        layout="total, prev, pager, next"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

import { Search, Refresh } from '@element-plus/icons-vue'

const router = useRouter()
interface InboundItem {
  code: string
  bizCode?: string
  warehouse: string
  quantity: number
  amount: number
  status: '未入库' | '已入库' | '作废'
  type: string
  supplier: string
  createTime: string
  updateTime: string
  operator: string
  remark?: string
}

// 搜索表单
const searchForm = ref({
  status: '',
  type: '',
  code: '',
  bizCode: ''
})

// 分页配置
const pagination = ref({
  current: 1,
  size: 10,
  total: 100
})

// 表格数据
const tableData = ref<InboundItem[]>([
  {
    code: 'RK02271101',
    warehouse: '苏州园区',
    quantity: 0,
    amount: 3.00,
    status: '未入库',
    type: '采购入库',
    supplier: '苏州CS有限公司',
    createTime: '02-27 12:06',
    updateTime: '02-27 12:06',
    operator: 'ck'
  },{
    code: 'RK02271101',
    warehouse: '苏州园区',
    quantity: 0,
    amount: 3.00,
    status: '未入库',
    type: '采购入库',
    supplier: '苏州CS有限公司',
    createTime: '02-27 12:06',
    updateTime: '02-27 12:06',
    operator: 'ck'
  },{
    code: 'RK02271101',
    warehouse: '苏州园区',
    quantity: 0,
    amount: 3.00,
    status: '未入库',
    type: '采购入库',
    supplier: '苏州CS有限公司',
    createTime: '02-27 12:06',
    updateTime: '02-27 12:06',
    operator: 'ck'
  },{
    code: 'RK02271101',
    warehouse: '苏州园区',
    quantity: 0,
    amount: 3.00,
    status: '未入库',
    type: '采购入库',
    supplier: '苏州CS有限公司',
    createTime: '02-27 12:06',
    updateTime: '02-27 12:06',
    operator: 'ck'
  },{
    code: 'RK02271101',
    warehouse: '苏州园区',
    quantity: 0,
    amount: 3.00,
    status: '未入库',
    type: '采购入库',
    supplier: '苏州CS有限公司',
    createTime: '02-27 12:06',
    updateTime: '02-27 12:06',
    operator: 'ck'
  },{
    code: 'RK02271101',
    warehouse: '苏州园区',
    quantity: 0,
    amount: 3.00,
    status: '未入库',
    type: '采购入库',
    supplier: '苏州CS有限公司',
    createTime: '02-27 12:06',
    updateTime: '02-27 12:06',
    operator: 'ck'
  },
])

const handleadd = () => {
  router.push('/StorageAdd')
}

// 选项数据需要调整
const inboundStatusOptions = [
  { value: '未入库', label: '未入库' },
  { value: '已入库', label: '已入库' },
  { value: '作废', label: '作废' }
]

const inboundTypeOptions = [
  { value: '生产入库', label: '生产入库' },
  { value: '采购入库', label: '采购入库' },
  { value: '退货入库', label: '退货入库' },
  { value: '归还入库', label: '归还入库' }
]


// 搜索方法
const handleSearch = () => {
  // 实现搜索逻辑
}

// 重置方法
const handleReset = () => {
  searchForm.value = {
    status: '',
    type: '',
    code: '',
    bizCode: ''
  }
}

// 操作按钮方法
const handleEdit = (row: InboundItem) => {
  console.log('修改', row)
}

const handleView = (row: InboundItem) => {
  console.log('查看', row)
}

const handleDelete = (row: InboundItem) => {
  console.log('删除', row)
}

const handlePrint = (row: InboundItem) => {
  console.log('打印', row)
}
</script>

<style scoped lang="scss">
.filter-group {
  margin-bottom: 16px;

  :deep(.el-radio-group) {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  :deep(.el-radio) {
    margin: 0;
    height: 32px;

    .el-radio__input {
      display: none;
    }

    .el-radio__label {
      display: block;
      padding: 5px 16px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      font-size: 14px;
      transition: all 0.2s;
      cursor: pointer;
    }

    &.is-checked .el-radio__label {
      font-weight: 500;
      border-width: 1px;
    }
  }

  // 入库状态专用样式
  .status-tag {
    &.is-checked .el-radio__label {
      &[for="未入库"], &[for="已入库"], &[for="作废"] {
        border-width: 1px;
        size:small;
      }
    }

    &[for="未入库"] {
      .el-radio__label {
        border-color: #f5dab1;
        color: #e6a23c;
        background: #fdf6ec;
        size:small;
      }
      &.is-checked .el-radio__label {
        border-color: #e6a23c;
      }
    }

    &[for="已入库"] {
      .el-radio__label {
        border-color: #c2e7b0;
        color: #67c23a;
        background: #f0f9eb;
        size:small;
      }
      &.is-checked .el-radio__label {
        border-color: #67c23a;
      }
    }

    &[for="作废"] {
      .el-radio__label {
        border-color: #fbc4c4;
        color: #f56c6c;
        background: #fef0f0;
        size:small;
      }
      &.is-checked .el-radio__label {
        border-color: #f56c6c;
      }
    }
  }

  // 入库类型专用样式
  .type-tag {
    &.is-checked .el-radio__label {
      border-color: #409eff;
      color: #409eff;
      background: #ecf5ff;
    }
  }
}

.search-buttons {
  .el-button {
    padding: 10px 20px;
    display: inline-flex;
    align-items: center;
    
    .el-icon {
      margin-right: 6px;
    }
  }
}
</style>